<template>
  <a-card>
    <h2>赛事</h2>
    <MatchForm v-model:show="showModal" action="add" race-list />
    <a-table :columns="columns" :data="matchList" :pagination="false">
      <template #matchType="{ record }">
        <a-tag>{{
          ['未知', '积分赛', '常规赛', '定段赛'][record.matchType]
        }}</a-tag>
      </template>
      <template #raceList="{ record }">
        <a-tag v-for="k in record.itemList" :key="k">{{
          raceList.get(k)
        }}</a-tag>
      </template>
      <template #option="{ record }">
        <a-space>
          <a-button-group>
              <a-button @click="handleClick(record)">
                <template #icon><icon-bar-chart /></template>
                报名参加
              </a-button>
          </a-button-group>
        </a-space>
      </template>
    </a-table>
    <a-pagination style="margin-top: 10px" @change="pageChange" :total="total" :current="curPage" :page-size="pageSize" />
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title> 确认报名参赛 </template>
      <div>
        <a-card :title="applicationMatch.matchTitle">
          开始时间: {{ applicationMatch.startTime }}
          <br>
          结束时间: {{ applicationMatch.endTime }}
        </a-card>
      </div>
    </a-modal>
  </a-card>
</template>

<script setup lang="ts">
  import { Message } from '@arco-design/web-vue';
  import axios from 'axios';
  import { onMounted, ref } from 'vue';

  const curPage = ref(1)
  const pageSize = ref(8)
  const total = ref(0)

  const columns = [
    {
      title: 'id',
      dataIndex: 'matchScheduleId',
    },
    {
      title: '赛事名称',
      dataIndex: 'matchTitle',
    },
    {
      title: '类型',
      slotName: 'matchType',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endTime',
    },
    {
      title: '项目',
      slotName: 'raceList',
    },
    {
      title: '操作',
      slotName: 'option',
    },
  ];
  const matchList = ref([] as any);
  const raceList = ref(new Map<number, string>());
  raceList.value = new Map([
    [1, '二阶'],
    [2, '三阶'],
    [3, '四阶'],
    [4, '五阶'],
    [5, '三盲'],
    [6, '单手'],
    [7, '金字塔'],
    [8, '斜转'],
  ]);
  const showModal = ref(false)
  const approveStatus = ref(1)
  const getData = () => {
    matchList.value = []
    axios.get(`/match/matchList`, {
      params:{
        curPage: curPage.value,
        pageSize: pageSize.value
      }
    }).then(res => {
      console.log(res)
      curPage.value = res.current
      pageSize.value = res.size
      total.value = res.total
      res.records.forEach((element:any) => {
        console.log(element.approveStatus)
        matchList.value.push(element)
      });
    })
  }
  onMounted(async() => {
    await getData()
  })

  const pageChange = (current:number) => {
    curPage.value = current
    getData()
  }
  
  const applicationMatch = ref({
    matchScheduleId:'',
    matchTitle:'',
    startTime: '',
    endTime: ''
  })
  const visible = ref(false);
  const handleClick = (record:any) => {
    visible.value = true
    applicationMatch.value.matchScheduleId = record.matchScheduleId
    applicationMatch.value.matchTitle = record.matchTitle
    applicationMatch.value.startTime = record.startTime
    applicationMatch.value.endTime = record.endTime
  };
  const handleOk = () => {
    visible.value = false
    axios.post(`/match/applyJoin`,{
        matchScheduleId:applicationMatch.value.matchScheduleId
    }).then(res => {
      console.log(res)
      visible.value = false
      getData()
      Message.success({
        id: 'applyJoin',
        content: `申请成功，请耐心等待`,
        duration: 2000
      })
    })
  };
  const handleCancel = () => {
    visible.value = false;
  };

  
  function handleDelete(raceItemId: number) {
    console.log(raceItemId);
  }
</script>
